<template>
    <div>
        <el-form
          :model="bindForm"
          :rules="rules"
          ref="refAddInfo"
          label-width="120px"
        >
          <el-form-item size="small" prop="mobile" label="新手机号码">
            <el-input
              clearable
              ref="input"
              placeholder="请输入新手机号码"
              maxlength="11"
              v-model.trim="bindForm.mobile"
            >
            </el-input>
          </el-form-item>
  
          <el-form-item size="small" prop="code" label="短信验证码">
            <div style="position: relative">
              <el-input
                placeholder="请输入短信验证码"
                maxlength="6"
                v-model.trim="bindForm.code"
              >
              </el-input>
              <div @click="smsCodeClick2" class="code">
                <span v-show="showCountDown2">获取验证码</span>
                <span v-show="!showCountDown2">{{ countDown2 }}秒重新获取</span>
              </div>
            </div>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button size="small" @click="closeEditDialog" class="cancel-button">取 消</el-button>
          <el-button size="small" @click="editSubmit" type="primary" class="confirm-button"
            >确 定</el-button
          >
        </div>
    </div>
  </template>
  
  <script>
  import { getSmsCode, reqChangeMobile } from "@/api/api";
  import { mapState } from "vuex";
  import { validMobile } from "@utils/validate";
  
  export default {
    name: "add",
    components: {},
    data() {
      return {
        dialogVisible: false,
        bindForm: {},
        showCountDown2: true, //显示倒计时
        countDown2: "", //倒计时一分钟
        // 表单验证规则
        rules: {
          mobile: [
            { required: true, message: "请输入新手机号码", trigger: "blur" },
            {
              validator: validMobile,
            },
          ],
          code: [
            { required: true, message: "请输入短信验证码", trigger: "blur" },
          ],
        },
      };
    },
    computed: {
      ...mapState(["user"]),
    },
    methods: {
      // 点击获取短信验证码
      async smsCodeClick2() {
        this.$notify.closeAll();
        if (!this.bindForm.mobile)
          return this.$modal.notifyWarning("请输入手机号");
        if (this.bindForm.mobile.length < 11)
          return this.$modal.notifyWarning("手机号码为11位数字");
        const reg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;
        if (!reg.test(this.bindForm.mobile))
          return this.$modal.notifyWarning("请输入正确的手机号");
        if (!this.showCountDown2) return; //60s内只需发一次验证码
        // 发送验证码
        let res = await getSmsCode({
          mobile: this.bindForm.mobile,
        });
        if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
        this.$modal.notifyWarning("请注意查收手机短信验证码");
  
        this.showCountDown2 = false;
        this.countDown2 = 60;
        let intervalId = setInterval(() => {
          if (this.countDown2 > 0 && this.countDown2 <= 60) {
            this.countDown2--;
          } else {
            this.showCountDown2 = true;
            clearInterval(intervalId);
            intervalId = null;
          }
        }, 1000);
      },
      editSubmit() {
        this.$refs.refAddInfo.validate(async (valid) => {
          if (valid) {
            //  更换手机号
            const res2 = await reqChangeMobile({
              id: this.user.userId,
              mobile: this.bindForm.mobile,
              code: this.bindForm.code,
            });
            if (res2.code !== 20000)
              return this.$modal.notifyWarning(res2.message);
            this.$modal.notifySuccess("修改手机号成功");
            this.$store.commit("saveMobile", this.bindForm.mobile); //页面更换手机号
            this.closeEditDialog(); //取消按钮清空
          }
        });
      },
      // 点击关闭弹框
      closeEditDialog() {
        this.countDown2 = "";
        this.$refs.refAddInfo.resetFields();
        this.$emit('closeAddDialog')
      },
    },
  };
  </script>
  
  <style lang="less" scoped>
  @import url("../../../views/common.less");
  
  .code {
    position: absolute;
    width: 90px;
    height: 30px;
    line-height: 30px;
    top: 50%;
    transform: translateY(-50%);
    right: 0;
    color: #7367f0;
    cursor: pointer;
  }
  .dialog-footer{
    text-align: right;
}
  </style>
  